<template>
    <view class="content">
        <view class="title">注册</view>
        <view class="sub-title">
            创建您的
            <text style="color: #00a1e9;">新房通账号</text>
        </view>
        
        <view style="margin-top: 5rpx;" >
            <view class="padding-tb border1 flex align-center justify-between">
                <view class="ava">账号头像</view>
                <view class="ava-box" @click="$screenshot('logo',1,1)">
                    <image :src="image_uri || '../../static/icon/avatar.png'" class="avatar"></image>
                    <image src="../../static/icon/photo.png" class="photo"></image>
                </view>
            </view>
            <view class="padding-tb-lg border1">
                <input type="text" v-model="name" placeholder="请输入姓名" placeholder-class="text-lg text-gray" />
            </view>
            <view class="padding-tb-lg border1">
                <input type="number" v-model="mobile" placeholder="请输入手机号" placeholder-class="text-lg text-gray" />
            </view>
            <view class="u-p-t-25 u-p-b-25 border1 flex align-center justify-between">
                <input class="flex-sub margin-right" type="number" placeholder="请输入验证码" v-model="code"
                    placeholder-class="text-lg text-gray" />
                <view class="code" :class="{ activeCode: time < 60 }" @click="$noMultipleClicks(getCode)">{{ txt }}</view>
            </view>
            <view class="padding-tb-lg border1">
                <input type="password" v-model="password" placeholder="请输入密码" placeholder-class="text-lg text-gray" />
            </view>
            <view class="padding-tb-lg border1">
                <input type="text" v-model="yqcode" placeholder="机构邀请码,非必填" placeholder-class="text-lg text-gray"
                    @blur="blur" />
            </view>
            <view class="padding-tb-lg border1">
                <input type="text" v-model="store" placeholder="请搜索选择门店" placeholder-class="text-lg text-gray" 
                    disabled @click="focus" />
            </view>
        </view>
        
        <view class="text-sm tip2">
            查看
            <text class="tip" @click.stop="$gTo('/mine/pages/other/user-agreement')">《用户协议》</text>
            和
            <text class="tip" @click.stop="$gTo('/mine/pages/other/user-privacy')">《隐私政策》</text>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(next)">创建账号并认证</view>
        
        <u-popup mode="bottom" v-model="show">
            <view class="popup">
                <u-search placeholder="请输入门店名称" v-model="keyword" :show-action="false" @search="doSearch"></u-search>
                <scroll-view scroll-y="true" style="height: 500rpx;">
                    <view>
                        <view class="popup-item" v-for="(item, index) in list" :key="index"
                            :class="{active : item.isSelect}" @click="choose(item)">
                            {{item.name}}
                        </view>
                    </view>
                </scroll-view>
                <view class="pop-btn" @click="confirmStore">确定</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                noClick:true,
                image_uri: '',
                image_id: '',
                name: '',
                mobile: '',
                code: '', //验证码
                password: '', //密码
                yqcode: '',
                store: '',
                storeId: '',
                time: 60, // 倒计时
                txt: '发送验证码',
                keyword: '',
                list: [],
                clientid: '',
            };
        },
        onLoad(option) {
            var _this =this
            uni.$on('uAvatarCropper', data => {
                _this.$upLoadPic(data.path).then(ret => {
                    console.log(ret)
                    if (data.fromWhere == "logo"){
                        _this.image_uri = ret.detail.image
                        _this.image_id = ret.detail.image_id
                    }
                });
            })
            
            // let clientInfo = plus.push.getClientInfo()
            // this.clientid = clientInfo.clientid
            // uni.setStorageSync('device_token',this.clientid)
            // console.log('this.clientid',this.clientid)
        },
        methods: {
            // 创建账号并认证
            next() {
                // if (!this.image_id) {
                //     this.$toast('请上传头像！');
                //     return false;
                // }
                if (!this.name) {
                    this.$toast('请输入姓名！');
                    return false;
                }
                if (!this.mobile) {
                    this.$toast('请输入手机号！');
                    return false;
                }
                if (!this.$checkPhone(this.mobile)) {
                    this.$toast('手机号码格式不正确');
                    return false;
                }
                if (!this.code) {
                    this.$toast('请输入验证码！');
                    return false;
                }
                if (!this.password) {
                    this.$toast('请输入密码！');
                    return false;
                }
                // if (!this.yqcode) {
                //     this.$toast('请输入机构邀请码！');
                //     return false;
                // }
                if (!this.storeId) {
                    this.$toast('请选择门店！');
                    return false;
                }
                this.$ajax('register', {
                    image_id: this.image_id,//头像id
                    user_name: this.name,//姓名
                    phone: this.mobile,//手机号
                    verify_code: this.code,//验证码
                    password: this.password,//密码
                    code: this.yqcode,//邀请码
                    stores_id: this.storeId,//门店id
                }).then(ret => {
                    if (ret.success == 1000) {
                        uni.setStorageSync('userToken', ret.detail.user_token)
                        // if (this.clientid) {
                        //     this.bingDeviceToken()
                        // }
                        this.$cTo('/pages/login/real-name')
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 推送
            bingDeviceToken() {
                this.$ajax('umeng_device_token', {
                    user_token: this.$getSync('userToken'),
                    device_token: this.clientid,
                }).then(ret => {
                    if (ret.success == 1000) {
                        
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 选择门店
            choose(item) {
				const nowStatu = item.isSelect
				this.list.forEach(ii => {
				    ii.isSelect = false;
				})
				item.isSelect =! nowStatu
            },
            confirmStore() {
                var a = [], b = []
                if (this.list && this.list.length > 0) {
                    this.list.forEach(cur => {
                        if (cur.isSelect) {
                            a.push(cur.name)
                            b.push(cur.id)
                        }
                    })
                }
                this.store = a.join(',')
                this.storeId = b.join(',')
                this.show = false
            },
            // 搜索门店
            doSearch() {
                this.getStore()
            },
            
            focus() {
                this.getStore()
                // if (this.yqcode) {
                //     this.getStore()
                // } else {
                //     this.$toast('请先输入机构邀请码！');
                // }
            },
            // 输入邀请码后 展示门店
            blur() {
                this.getStore()
                // if (this.yqcode) {
                //     this.getStore()
                // }
            },
            // 获取门店列表
            getStore() {
                this.$ajax('stores', {
                    code: this.yqcode,//机构邀请码
                    name: this.keyword,//搜索
                }).then(ret => {
                    if (ret.success == 1000) {
                        this.list = ret.detail
                        if (this.list && this.list.length > 0) {
                            this.list.forEach(cur => {
                                this.$set(cur, 'isSelect', false)
                            })
                        }
                        this.show = true
                    } else {
                        this.$toast(ret.msg);
                    }
                });
            },
            
            // 获取验证码
            getCode() {
                let _this = this;
                if (!_this.mobile) {
                    _this.$toast('请输入手机号码');
                    return false;
                }
                if (!_this.$checkPhone(_this.mobile)) {
                    _this.$toast('手机号码格式不正确');
                    return false;
                }
                if (_this.time != 60) {
                    return false;
                }
                _this.$ajax('verify', {
                    phone: _this.mobile,
                    // type: 1 ,// 1-登录 2-注册 3-找回密码 4-绑定手机号 5-修改密码
                }).then(ret => {
                    if (ret.success == 1000) {
                        _this.txt = _this.time + 'S后可再次获取';
                        let fn = setInterval(() => {
                            _this.time--;
                            _this.txt = _this.time + 'S后可再次获取';
                            if (_this.time == 0) {
                                clearInterval(fn);
                                _this.time = 60;
                                _this.txt = '获取验证码';
                            }
                        }, 1000);
                    } else {
                        _this.$toast(ret.msg);
                    }
                });
            },
        }
    };
</script>

<style lang="scss">
    .tip2{
        color: #000;
        padding: 30rpx 0 20rpx;
    }
    .tip{
        color: #fe6155;
    }
    
    .popup{
        padding: 24rpx;
    }
    .popup-item{
        padding: 20rpx 0;
        text-align: center;
    }
    .active{
        font-weight: bold;
        color: #00a1e9;
    }
    .pop-btn{
        color: #fff;
        background-color: #00a1e9;
        padding: 20rpx;
        text-align: center;
        margin: 20rpx;
        border-radius: 50rpx;
    }
    
    
    .ava{
        font-size: 32rpx;
        color: #aaaaaa;
    }
    .ava-box{
        position: relative;
    }
    .avatar{
        width: 134rpx;
        height: 134rpx;
        border-radius: 50%;
        border: 2rpx solid #e6e6e6;
    }
    .photo{
        width: 44rpx;
        height: 44rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .title{
        font-size: 50rpx;
        font-weight: bold;
    }
    .sub-title{
        font-size: 34rpx;
        color: #8b8a8a;
    }
    .border1 {
        border-bottom: 2rpx solid #eaebf0;
    }
    .code {
        background-color: #efefef;
        font-size: 30rpx;
        color: #848383;
        border-radius: 50rpx;
        width: 300rpx;
        height: 76rpx;
        line-height: 76rpx;
        text-align: center;
    }
    .activeCode {
        background: #cccccc;
        color: #fff;
    }
    
    .btn {
        border-radius: 50rpx;
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 34rpx;
        background-color: #00a1e9;
        margin: 40rpx auto 0;
        color: #FFFFFF;
    }
    
    
    
    .content{
        padding: 20rpx 50rpx;
    }
    
    
    
</style>
